import React, { Component } from 'react';
import { Modal, Cascader, Input, Row, Col, DatePicker, Form, Select,Table,Popover } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ProductTable from './ProductTable';
import divisions from '../../utils/divisions.json';
import * as check from '../../utils/checkLib';

moment.locale('zh-cn');

const Option = Select.Option;
const FormItem = Form.Item;

class SuppModal extends Component {

  constructor(props) {
    super(props);
    this.state = {
    	storageList: [],
      previewImage: '',
    };

    // skuTable改写父级方法
    this.getSkuValue = null;
    this.clearSkuValue = null;
  }
  componentWillReceiveProps(...args) {
    const { modalValues = {}, isShowDetail } = args[0];
    const orderData = (modalValues && modalValues.data) || {};
    this.setState({ storageList: orderData.outerOrderDetails});
  }
    inputChange(type, skuId, value) {
    const storageList = this.state.storageList;
    storageList.forEach((el) => {
    	 if (el.id === skuId) {
        el[type] = typeof value !== 'object' ? value : value.target.value;
       }
    });
    this.setState({ storageList });
  }
  handleSubmit() {
    const p = this;
    const { form, dispatch, modalValues = {}, agencyList = [] } = p.props;
    const storageList = p.state.storageList;
    const orderData = (modalValues && modalValues.data) || {};
    const outerOrderDetailList = orderData.outerOrderDetails;
    form.validateFieldsAndScroll((err, fieldsValue) => {

    fieldsValue.outerOrderDetailList = JSON.stringify(storageList.map((el) => {
        const item = {};
          if (el.id) item.id = el.id;
          item.trackingNo = el.trackingNo || 0;
          item.domesticShipe = el.domesticShipe || 0;
          return item;
      }));
      
    if (fieldsValue) {
          dispatch({
            type:'order/updateDetailShipeOrder',
            payload: {
             outerOrderDetailList :  fieldsValue.outerOrderDetailList
            },
          });
        }
        p.closeModal();

     });
  }

  closeModal() {
    const { form, close } = this.props;
    close();

  }

  checkImg(rules, values, cb) { cb(); }

  handleDelete(id) {
    const { skuList } = this.state;
    const skuData = skuList.filter(item => id !== item.id);
    this.setState({ skuList: skuData });
  }

  render() {
    const p = this;
    const { form, title, visible, modalValues = {}, agencyList = [] } = p.props;
    const orderData = (modalValues && modalValues.data) || {};
    const { storageList } = p.state;
    const { getFieldDecorator } = form;
    const modalProps = {
      visible,
      width: 900,
      wrapClassName: 'modalStyle',
      okText: '保存',
      title,
      maskClosable: false,
      closable: true,
      onOk() {
        p.handleSubmit();
      },
      onCancel() {
        p.closeModal();
      },
    };
    const formItemLayout = {
      labelCol: { span: 11 },
      wrapperCol: { span: 13 },
    };
    const initialAddress = [];
    if (orderData.receiverState) initialAddress.push(orderData.receiverState);
    if (orderData.receiverCity) initialAddress.push(orderData.receiverCity);
    if (orderData.receiverDistrict) initialAddress.push(orderData.receiverDistrict);
    
    const skuColumns = [
      { title: '主订单号', dataIndex: 'orderNo', key: 'orderNo', width: 150, render(text) { return text || '-'; } },
      { title: '子订单号', dataIndex: 'erpNo', key: 'erpNo', width: 150, render(text) { return text || '-'; } },
      { title: '商品名称', dataIndex: 'itemName', key: 'itemName', width: 150, render(text) { return text || '-'; } },
      { title: 'SKU代码', dataIndex: 'skuCode', key: 'skuCode', width: 150, render(text) { return text || '-'; } },
      { title: '图片',
        dataIndex: 'skuPic',
        key: 'skuPic',
        width: 80,
        render(text) {
          const t = text ? JSON.parse(text).picList[0].url : '';
          return (
            t ? <Popover title={null} content={<img role="presentation" src={t} style={{ width: 400 }} />}>
              <img role="presentation" src={t} width={60} height={60} />
            </Popover> : '-'
          );
        },
      },
      { title: '订单状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        render(text) {
          switch (text) {
            case 0: return <font color="saddlebrown">新建</font>;
            case 1: return <font color="chocolate">部分发货</font>;
            case 2: return <font color="blue">全部发货</font>;
            case -1: return <font color="red">已关闭</font>;
            default: return '-';
          }
        },
      },
      { title: '备货状态',
        dataIndex: 'stockStatus',
        key: 'stockStatus',
        width: 100,
        render(text) {
          switch (text) {
            case 0: return <font>未备货</font>;
            case 1: return <font color="sienna">部分备货</font>;
            case 2: return <font color="saddlebrown">部分在途备货</font>;
            case 3: return <font color="saddlebrown">全部在途备货</font>;
            case 4: return <font color="sienna">混合备货完成</font>;
            case 9: return <font color="red">已释放</font>;
            case 10: return <font color="blue">已备货</font>;
            case 11: return <font color="green">预出库</font>;
            default: return '-';
          }
        },
      },
      { title: '颜色', dataIndex: 'color', key: 'color', width: 60, render(text) { return text || '-'; } },
      { title: '尺码', dataIndex: 'scale', key: 'scale', width: 60, render(text) { return text || '-'; } },
      { title: '品牌', dataIndex: 'brand', key: 'brand', width: 60, render(text) { return text || '-'; } },
      { title: '销售价', dataIndex: 'salePrice', key: 'salePrice', width: 60, render(text) { return text || 0; } },
      { title: '运费', dataIndex: 'freight', key: 'freight', width: 60, render(text) { return text || 0; } },
      { title: '数量', dataIndex: 'quantity', key: 'quantity', width: 60, render(text) { return text || 0; } },
      { title: '物流公司',
        dataIndex: 'domesticShipe',
        key: 'domesticShipe',
        width: 80,
        render(t, r) {
          return (
                    <Select defaultValue={t} onChange={p.inputChange.bind(p, 'domesticShipe', r.id)}>
                              <Option value="顺丰">顺丰</Option>
                              <Option value="韵达">韵达</Option>
                    </Select>
          );
        },
      },
      { title: '物流单号',
        dataIndex: 'trackingNo',
        key: 'trackingNo',
        width: 80,
        render(t, r) {
          return (
	                <Input  placeholder="请写入" value={t}  onChange={p.inputChange.bind(p, 'trackingNo', r.id)} />
          );
        },
      },
    ];
    return (
      <Modal {...modalProps} >
        <Form onSubmit={p.handleSubmit.bind(p)}>
          <Row>
            <Table columns={skuColumns} bordered scroll={{ x: '180%', y: 500 }} dataSource={storageList}   rowKey={record => record.id} pagination={false} />
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(SuppModal);
